<template>
  <div>
    <van-cell
      icon="search"
      :title="item"
      v-for="(item, i) in HLSuggestions"
      :key="i"
      @click="$emit('update_kws', suggestions[i])"
    >
      <template #title>
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { searchSuggestionsAPI } from '@/api'
import { debounce } from 'lodash'
export default {
  data() {
    return {
      suggestions: []
    }
  },
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  computed: {
    // ① map方法
    // - 返回值 跟原数组长度一致的新数组
    // ② 动态正则
    // - 字面量的正则 /a/ 缺点：正则是写死的
    // - RegExp --> regular expression  new RegExp(正则内容字符串，修饰符字符串)
    // ③字符串的replace方法 ==> 返回值：替换后的新字符串
    // - replace（子字符串，替换的字符串）
    // - replace（正则，替换的字符串）
    // - replace（正则，函数）==> 函数的返回值作为替换的结果，match函数的参数，返回正则匹配的结果
    HLSuggestions() {
      const reg = new RegExp(this.keywords, 'ig')
      return this.suggestions.map((str) => {
        return str.replace(
          reg,
          (match) => `<span style="color:red">${match}</span>`
        )
      })
    }
  },
  watch: {
    // 监视属性
    // 1、函数式；2、对象写法；
    // 3、字符串的写法（可以直接写在keywords后面，也可以写在handler里）（在methods身上去找方法）
    keywords: {
      // bug修复：输入第一个关键词时不触发搜索建议
      // keywords发生变化时会发生：
      // 1、决定渲染所搜建议组件
      // 2、监视keywods发生变化，请求搜索建议
      handler: 'getSearchSuggestions',
      immediate: true //组件创建时立马执行监视keywords，不用等keywords变化
    }
  },
  methods: {
    getSearchSuggestions: debounce(async function () {
      // 去除后端返回数据数组中的null
      // 版本一：
      // this.suggestions = data.data.options.filter((item) => item !== null)
      // 版本二：
      // this.suggestions = data.data.options.filter((item) => Boolean(item))
      // 版本三：
      // window.Boolen = function(arg1){return boolean}
      // this.suggestions = data.data.options.filter(Boolean)

      const { data } = await searchSuggestionsAPI(this.keywords)
      this.suggestions = data.data.options.filter((item) => !!item)
    }, 300)
    // 防抖：在频繁触发式，间隔时间段内只执行一次
    // 1、用定时器包裹；2、清除上一次的定时器
  }
}
</script>

<style></style>
